import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { inject, observer } from 'mobx-react';

import UserIcon from '../../assets/images/user_icon.png';

@inject('store')
@observer
class UserInfo extends Component {
    constructor(props) {
        super(props);

        this.store = props.store;
        this.state = {

        };
        _.bindAll(this, [
        ]);
    }

    componentDidMount() {
        this.store.getUserInfo();
    }

    // 随机生成范围内数字
    getRandomNmuber(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
    
    }
    render() {
        let props = this.props;
        const userInfo = this.store.userInfo;
        console.log(userInfo)

        return (
            <div className="user-bg-img">
                <div className="user-title">
                    <img className="user-icon" src={UserIcon} alt="" />
                    <span>用户档案</span>
                </div>
                <div className="user-info">
                    <div className="user-info-box">
                        {
                            _.map(userInfo && userInfo.data, (val, key) => {
                                return <div key={key} className="user-info-list" style={{ transform: `rotateY(${30*(key+1)-_.random(0,10)}deg) translateZ(${350- _.random(0, 50)}px)`, top: _.random(70, 135) }}>
                                    <i></i><i></i><i></i><i></i>
                                    <p className="user-label">{val.text}</p>
                                    <p className="user-data">{val.value}</p>
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}

UserInfo.propTypes = {
    name: PropTypes.string
}
export default UserInfo;